import React from 'react';
import { Form, Input, Button,message } from 'antd';
import './login.less';
import { history,request } from 'umi';
import { host } from '../utils/utils';

const layout = {
    labelCol: {
        span: 8,
    },
    wrapperCol: {
        span: 16,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 8,
        span: 16,
    },
};

export default function Login() {
    const onFinish = (values) => {
        request(`${host}/v1.0/api/login`, {
            method: 'post',
            data: {
                name: values.name,
                password: values.password
            },
        }).then((res) => {
            if(res.code == 200){
                localStorage.setItem('token',res.data.token);
                history.push('/statistics');
            }else{
                message.error('账号或密码错误！');
            }
        });
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };

    return (
        <div className="Login">
            <div className="main">
                <h1 className="title">智能客服后台系统</h1>
                <Form
                    {...layout}
                    name="basic"
                    initialValues={{
                        remember: true,
                    }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                >
                    <Form.Item
                        label="账号"
                        name="name"
                        rules={[
                            {
                                required: true,
                                message: '输入账号!',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="密码"
                        name="password"
                        rules={[
                            {
                                required: true,
                                message: '输入密码!',
                            },
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>

                    <Form.Item {...tailLayout}>
                        <Button type="primary" htmlType="submit">
                            登录
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
